<script setup lang="ts">
// 引入路由白名单，用于判断当前路由是否显示底部导航栏
import { routeWhiteList } from '@/config/routes'

// 获取当前路由对象
const route = useRoute()

// 调试信息
// console.log('当前路由信息:', {
//   path: route.path,
//   name: route.name,
//   fullPath: route.fullPath
// })

// 只有在白名单路由时才显示TabBar
// 修正：确保 route.name 为字符串时才判断白名单
const show = computed(() => {
  const routeName = route.name as string | undefined
  if (typeof routeName !== 'string') {
    // console.log('路由名称不是字符串:', routeName)
    return false
  }
  // const isInWhiteList = routeWhiteList.includes(routeName)
  // console.log('路由是否在白名单中:', routeName, isInWhiteList)
  // return isInWhiteList
  return routeWhiteList.includes(routeName)

})

// 计算当前激活的tab索引
const active = computed(() => {
  const path = route.path
  
  // 首页路由
  if (path === '/' || path === '/index') return 0  

  // 订单路由
  if (path.startsWith('/order')) return 1
  
  
  // 客服路由
  if (path.startsWith('/service')) return 2
  
  // 个人中心路由
  if (path.startsWith('/profile')) return 3
  
  return 0
})
</script>

<!--
  说明：
  1. $t('layouts.home') 是 vue-i18n 的语法，用于多语言国际化。
     - $t 是 i18n 插件自动注入到模板中的翻译函数。
     - 'layouts.home' 是多语言配置文件（如 src/locales/zh-CN.json）中的 key。
     - 会根据当前语言自动显示"首页"或"HOME"。
  2. van-tabbar-item 的 to 属性用于路由跳转。
-->
<template>
  <!-- v-if="show" 只有在白名单页面才显示底部导航栏 -->
  <van-tabbar v-if="show" :model-value="active" route placeholder>
    <!-- 首页Tab，点击跳转到/，显示多语言文本和图标 -->
    <van-tabbar-item replace to="/">
      {{ $t('layouts.home') }} <!-- 多语言：zh-CN为"首页"，en-US为"HOME" -->
      <template #icon>
        <div class="i-carbon:home" /> <!-- 图标 -->
      </template>
    </van-tabbar-item>

    <!-- 订单Tab，点击跳转到/order，显示多语言文本和图标 -->
    <van-tabbar-item replace to="/order">
      {{ $t('layouts.order')}} <!-- 多语言：如无配置则显示"订单" -->
      <template #icon>
        <div class="i-carbon:document" /> <!-- 订单图标 -->
      </template>
    </van-tabbar-item>

    <!-- 客服Tab，点击跳转到/service，显示多语言文本和图标 -->
    <van-tabbar-item replace to="/service">
      {{ $t('layouts.service') || '客服' }} <!-- 多语言：如无配置则显示"客服" -->
      <template #icon>
        <div class="i-carbon:customer-service" /> <!-- 客服图标 -->
      </template>
    </van-tabbar-item>

    <!-- 我的Tab，点击跳转到/profile，显示多语言文本和图标 -->
    <van-tabbar-item replace to="/profile">
      {{ $t('layouts.profile') }} <!-- 多语言：zh-CN为"我的"，en-US为"PROFILE" -->
      <template #icon>
        <div class="i-carbon:user" /> <!-- 图标 -->
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
